<template>
  <view class="mytabbar">
    <view class="mytabbar__nav">
      <view
        v-for="(item, idx) in navList"
        :key="idx"
        :class="item.value === activeNav ? 'mytabbaritem active' : 'mytabbaritem'"
        @click="tabChange(item)"
        :style="`flex: 0 0 ${100 / navList.length}%;`"
      >
        <img :src="`${item.value === activeNav ? item.activeIcon : item.icon}`" />
        {{ item.name }}
      </view>
    </view>

    <customer-info ref="customerInfoRef" />
  </view>
</template>

<script setup>
import CustomerInfo from "./customer-info.vue";

const emits = defineEmits(["tab-change"]);
const props = defineProps({
  navList: {
    type: Array,
    default: () => [],
  },
});

const { proxy } = getCurrentInstance();
const customerInfoRef = ref(null);
const navList =
  proxy.$storage.get("type") === "manufacturer"
    ? [
        {
          value: "index",
          icon: proxy.$constant.imgServerURL + "/homepage.png",
          activeIcon: proxy.$constant.imgServerURL + "/homepage-click.png",
          name: "首页",
          url: "/pages/index/index",
        },
        {
          value: "order",
          icon: proxy.$constant.img_serverURL + "/wx/icon1_0_new.png",
          activeIcon: proxy.$constant.img_serverURL + "/wx/icon1_1_new.png",
          name: "工单",
          url: "/pages/order/index",
        },
        {
          value: "knowledge",
          icon: proxy.$constant.img_serverURL + "/wx/icon2_0_new.png",
          activeIcon: proxy.$constant.img_serverURL + "/wx/icon2_1_new.png",
          name: "知识库",
          url: "/pages/knowledge/index",
        },
        {
          value: "performance",
          icon: proxy.$constant.imgServerURL + "/icon3_0_new.png",
          activeIcon: proxy.$constant.imgServerURL + "/icon3_1_new.png",
          name: "绩效",
          url: "/pages/performance/index",
        },
        {
          value: "my",
          icon: proxy.$constant.imgServerURL + "/personal_unclick.png",
          activeIcon: proxy.$constant.imgServerURL + "/personal_click.png",
          name: "我的",
          url: "/pages/manufacturer/my",
        },
      ]
    : [
        {
          value: "index",
          icon: proxy.$constant.imgServerURL + "/homepage.png",
          activeIcon: proxy.$constant.imgServerURL + "/homepage-click.png",
          name: "首页",
          url: "/pages/index/index",
        },
        {
          value: "order",
          icon: proxy.$constant.img_serverURL + "/wx/icon1_0_new.png",
          activeIcon: proxy.$constant.img_serverURL + "/wx/icon1_1_new.png",
          name: "工单",
          url: "/pages/order/problem",
        },
        {
          value: "device",
          icon: proxy.$constant.img_serverURL + "/wx/icon2_0_new.png",
          activeIcon: proxy.$constant.img_serverURL + "/wx/icon2_1_new.png",
          name: "已购设备",
          url: "/pages/device/index",
        },
        {
          value: "my",
          icon: proxy.$constant.imgServerURL + "/personal_unclick.png",
          activeIcon: proxy.$constant.imgServerURL + "/personal_click.png",
          name: "我的",
          url: "/pages/company/my",
        },
      ];

const activeNav = ref(proxy.$storage.get("activeNav") || navList[0].value);
const tabChange = ({ value, url }) => {
  // 判断登录
  if (proxy.$storage.get("type") === "company" && proxy.$storage.get("cid") == -1) {
    customerInfoRef.value.open();
  } else {
    proxy.$storage.set("activeNav", value);
    proxy.$router.navigateTo({
      url,
    });
  }
};
</script>

<style lang="scss">
.mytabbar {
  height: calc(44px + env(safe-area-inset-bottom));
  bottom: 0;
  position: fixed;
  z-index: 1000;
  width: 100vw;
  background: white;
  border-top: 1rpx solid #e1e1e1;
  // padding-bottom: env(safe-area-inset-bottom);

  &__nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .mytabbaritem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #878181;

    &.active {
      color: #4c7bfd;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>
